import React from 'react';
import { List, Avatar, Toast } from '@douyinfe/semi-ui';
import './Css/ConnectionList.css';
import { Connections, CopyConnection, DeleteConnection } from '../wailsjs/go/main/App';

const icons = { mysql: '🐬', sqlite: '💾', pgsql: '🐘' };
const colors = { mysql: 'violet', sqlite: 'amber', pgsql: 'pink' };
import { ContextMenuTrigger, ContextMenu, ContextMenuItem } from 'rctx-contextmenu';

class ConnectionList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            connections: [],
        };
    }

    setClipboardText(value) {
        let dsn = '';
        switch (value.connect_type) {
            case 'sqlite':
                dsn = value.db_path;
                break;
            case "mysql":
                dsn = value.username + ":" + value.password + "@" + value.host + ":" + value.port + "/" + value.database
                break;
            case "pgsql":
                dsn = "postgres://" + value.username + ":" + value.password + "@" + value.host + ":" + value.port + "/" + value.database
                break;
        }
        const text = document.createElement('textarea');
        text.value = dsn;
        document.body.appendChild(text);
        text.select();
        document.execCommand('Copy');
        text.remove();
        Toast.success('copied');
    }
    componentDidMount() {
        Connections().then((items) => this.setState({ connections: items || [] }));
    }

    render() {
        return (
            <div style={{ padding: 0, margin: 0, marginTop: 20, width: 250 }}>
                <List
                    dataSource={this.state.connections}
                    renderItem={(item, i) => (
                        <>
                            <ContextMenuTrigger
                                id={"connection-list-menu-" + item.id}
                            >
                                <List.Item
                                    header={<Avatar shape="square" color={colors[item.connect_type]} size={'default'}>{icons[item.connect_type]}</Avatar>}
                                    onClick={(event) => this.props.updateConnectForm(item)}
                                    main={
                                        <div>
                                            <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.name}</span>
                                            <div style={{ fontSize: '9px', color: '#969696', textOverflow: 'ellipsis', whiteSpace: 'nowrap', 'overflow': 'hidden' }}>
                                                {item.connect_type == 'sqlite' ? item.db_path : `${item.host}:${item.port}`}
                                            </div>
                                        </div>
                                    }
                                />
                            </ContextMenuTrigger>

                            <ContextMenu
                                hideOnLeave={true}
                                id={"connection-list-menu-" + item.id}
                                animation={'fade'}
                            >
                                <ContextMenuItem onClick={() => { this.props.updateConnectForm(item) }}>View</ContextMenuItem>
                                <ContextMenuItem onClick={() => {
                                    this.props.updateSpinning(true)
                                    this.props.updateConnect(item)
                                }}>Connect</ContextMenuItem>
                                <ContextMenuItem onClick={() => {
                                    CopyConnection(item).then((it) => {
                                        const connections = [...this.state.connections]
                                        connections.push(it)
                                        this.setState({ connections: connections })
                                        Toast.success('The connection was successfully duplicated');
                                    })
                                }}>Duplicate</ContextMenuItem>
                                <ContextMenuItem onClick={() => { this.setClipboardText(item) }} >CopyUrl</ContextMenuItem>
                                <ContextMenuItem onClick={() => {
                                    DeleteConnection(item.id).then((it) => {
                                        const connections = [...this.state.connections]
                                        connections.splice(i, 1)
                                        this.setState({ connections: connections })
                                        Toast.success(item.name + ' deleted');
                                    })
                                }}>Remove</ContextMenuItem>
                            </ContextMenu>
                        </>
                    )}
                />
            </div >
        );
    }
}

export default ConnectionList;